<template>
    <div class="other">
      <h1 class="gradient">渐变色，支持不友好</h1>
      <el-collapse v-model="activeName" accordion>

        <!-- elment滚动条-->
        <el-collapse-item title="element滚动条" name="14">
          <el-scrollbar class="bd" style="height:200px">
            <div style="height:400px">
             <div style="background:red;width:200px;height:100px"></div>
             <div style="background:yellow;width:200px;height:100px"></div>
            </div>
          </el-scrollbar>

        </el-collapse-item>

        <!-- Worker-->
        <el-collapse-item title="Worker" name="14">
          <button id="btn1" @click="startCreate">js</button>
          <button id="btn2" @click='startWorkerCreate'>worker</button>
          <input type="text">
        </el-collapse-item>

        <!-- v-for测试vue异步更新-->
        <el-collapse-item title="v-for测试vue异步更新" name="13">
          {{num2}}
        </el-collapse-item>

        <!-- clipboard==复制/剪切目标 -->
        <el-collapse-item title="clipboard==复制/剪切目标" name="1">
          <!-- Target -->
          <input id="foo" value="https://github.com/zenorocha/clipboard.js.git" />

          <!-- Trigger -->
          <el-button class="btn" data-clipboard-action="cut" data-clipboard-target="#foo">
            剪切
          </el-button>
          <el-button class="btn" data-clipboard-target="#foo"> 复制 </el-button>
        </el-collapse-item>

        <!-- Uuid插件==基于node环境，保证当前环境字符串唯一 -->
        <el-collapse-item title="Uuid插件==基于node环境，保证当前环境字符串唯一" name="2">
          <p>uuid.v1===={{ uuid.v1() }}</p>
          <p>uuid.v4===={{ uuid.v4() }}</p>
        </el-collapse-item>

        <!-- 动态路由 -->
        <el-collapse-item title="动态路由" name="3">
          <el-button @click="gohome">跳转主题修改页</el-button>
        </el-collapse-item>

        <!-- 测试构造器开发插件 -->
        <el-collapse-item title="测试构造器开发插件" name="4">
          <el-button @click="toastclick">点击</el-button>
        </el-collapse-item>

        <!-- 测试二次确认组件 -->
        <el-collapse-item title="测试二次确认组件" name="5">
          <el-button @click="agin">点击二次确认</el-button>
        </el-collapse-item>

        <!--页头  -->
        <el-collapse-item title="页头" name="6">
          <el-page-header title="上一页" @back="goBack" content="详情页面"></el-page-header>
        </el-collapse-item>

        <!--计数器  -->
        <el-collapse-item title="计数器" name="7">
          <el-input-number v-model="num" step-strictly :step="3" :min="1" :max="10" label="描述文字">
          </el-input-number>
          <el-input-number v-model="num" step-strictly :step="3" :controls="false" :min="1"
                           :max="10" label="描述文字"></el-input-number>
        </el-collapse-item>

        <!--  swich开关-->
        <el-collapse-item title="swich开关" name="8">
          <el-switch v-model="value"></el-switch>
        </el-collapse-item>

        <!-- 测试scss全局变量 -->
        <el-collapse-item title="测试scss全局变量" name="9">
          <div class="box"></div>
        </el-collapse-item>

        <!-- 抽屉 -->
        <el-collapse-item title="抽屉" name="10">
          <el-button @click="drawer = true" type="primary" style="margin-left: 16px">点我打开
          </el-button>
          <el-drawer destroy-on-close size="500px" :visible.sync="drawer" direction="rtl">
            <span slot="title">我来啦!</span>
          </el-drawer>
        </el-collapse-item>

        <!--鼠标滚动放大图片  -->
        <el-collapse-item title="鼠标滚动放大图片" name="11">
          <img id="myimage" width="200px"
               src="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg" alt />
          <el-divider></el-divider>
          12312
        </el-collapse-item>
      </el-collapse>
      <div style="height:1000px"></div>
      <!-- vue-lazyload img懒加载 -->
      <img v-lazy="require('../../assets/image/login.png')" width="200px" height="200px">

    </div>
</template>

<script>
import user from '@/api/user'
import * as uuid from 'uuid'
import Clipboard from 'clipboard'
import { debounce } from '@/utils/debounce'
import defalt, { a, b as c } from "./a"//映入变量b并重名为c
console.log(defalt, a, c);
export default {
  name: 'other_message',

  data() {
    return {
      num: '',
      num2: 0,
      value: '',
      drawer: false,
      uuid,
      urls: [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
      ],
      timers: new Date(),
      rateVal: undefined,
      test: '',
      activeName: '13',
      worker: null
    }
  },

  created() {
    this.test = process.env.VUE_APP_FLAG
  },

  mounted() {
    // setTimeout(() => {
    //     console.time('aa')
    // for (let i = 0; i < 10000000; i++) {
    //   this.num2++
    // }
    // console.timeEnd('aa')
    // }, 2000);

    this.Clipboard()
    user
      .getUserInfo()
      .then((res) => {
        console.log(res)
      })
      .catch((err) => { })
    var myimage = document.getElementById('myimage')
    if (myimage.addEventListener) {
      // IE9, Chrome, Safari, Opera
      myimage.addEventListener('mousewheel', this.MouseWheelHandler, false)
      // Firefox
      myimage.addEventListener('DOMMouseScroll', this.MouseWheelHandler, false)
    }
    // IE 6/7/8
    else myimage.attachEvent('onmousewheel', this.MouseWheelHandler)
  },
  methods: {
    // 普通梳理大量数据，页面会卡顿
    startCreate() {
      let total = 1;

      for (let i = 0; i < 5000000000; i++) {
        total += i;
      }

      console.log('total', total);
    },
    // worker里处理大量数据，不影响页面
    startWorkerCreate() {
      this.worker = this.$worker.run(n => {
        for (let i = 0; i < 10000; i++) {
          console.log(i);
        }
        return '完成'
      })
        .then(res => console.log(res))
        .catch(e => console.log(e))
    },
    // 初始化复制插件
    Clipboard() {
      let clipboard = new Clipboard('.btn')
      clipboard.on('success', (e) => {
        console.info('Action:', e.action)
        console.info('Text:', e.text)
        console.info('Trigger:', e.trigger)
        this.$message.success('ok')
        e.clearSelection()
      })
      clipboard.on('error', (e) => {
        console.error('Action:', e.action)
        console.error('Trigger:', e.trigger)
      })
    },
    // 动态路由
    gohome() {
      // this.$router.push({ path: "/theme_message/deng1",query:{key:'deng2'}});
      this.$router.push({
        name: 'theme_message',
        params: { age: '20', key: 'deng1' },
      })
    },

    // 鼠标滚动放大图片
    MouseWheelHandler(e) {
      var e = window.event || e // old IE support
      var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
      myimage.style.width =
        Math.max(50, Math.min(800, myimage.width + 30 * delta)) + 'px'
      // return false;  //无用
      e.preventDefault() //有用
      // 宽度范围设置在50-800个像素之间
    },

    goBack() {
      window.history.go(-1)
      console.log('go back')
    },
    agin() {
      debugger
      this.$confirm({ type: '123', msg: '确定？' })
        .then((data) => {
          console.log(data)
        })
        .catch((data) => {
          console.log(data)
        })
    },
    toastclick: debounce(
      function () {
        this.$toast({
          title: '哈哈哈哈',
          sss: 'sssadasdasdasd',
        })
          .then((res) => {
            console.log(res)
          })
          .catch((err) => {
            console.log(err)
          })
      },
      2000,
      true
    ),
  },
  destroyed() {
    this.worker = null
  }
}
</script>

<style lang="scss" scoped>
@keyframes bgp {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.colorful a {
  margin-right: 5px;
  text-decoration: none;
  padding: 3px 0;
}
.other {
  height: 100%;
}
.box {
  height: 200px;
  width: 200px;
  background: $red;
}
.gradient {
  background-image: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    green,
    yellow,
    orange,
    red,
    orange,
    yellow,
    green,
    blue,
    green,
    yellow,
    orange,
    red
  );
  -webkit-text-fill-color: transparent; /*文字填充色为透明*/
  -webkit-background-clip: text; /*背景剪裁为文字，只将文字显示为背景*/
  background-size: 200% 100%; /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
  animation: bgp 5s infinite linear;
}
</style>
